<!-- 商机中心 -->
<template>
	<view class="">
		<u-navbar :is-back="false">
			<view class="flex-bettwen w100 p-r20">
				<view class="tab-box">
					<u-tabs active-color="#000" inactive-color="#999999" :list="tabList" :is-scroll="false"
						:current="current" @change="change"></u-tabs>
				</view>
				<u-icon name="list-dot" size="40" v-if="isShowlist" @click="isShowlist = !isShowlist"></u-icon>
				<u-icon name="grid" size="40" v-else @click="isShowlist = !isShowlist"></u-icon>
			</view>
		</u-navbar>

		<!-- 分类暂时隐藏 -->
		<!-- <view class="flex-bettwen bg-white" style="position: sticky;">
			<view class="flex1">
				<u-tabs active-color="#10a4db" font-size="26" :list="classList" :is-scroll="false"
					:current="currentClass" @change="changeClass"></u-tabs>
			</view>
			<view class="w-100">
				<text class="fs26 m-r10">筛选</text>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view> -->

		<!-- 瀑布流显示 -->
		<view class="m-t20 padding20" v-if="isShowlist">
			<u-waterfall ref="waterfall" v-model="flowList">
				<template v-slot:left="{leftList}">
					<view class="waterfall-item-l bg-white m-b20" v-for="(item, index) in leftList"
						@click="goDatail(item)" :key="index">
						<view class="img-box br-top-letfright16 hidden">
							<u-icon name="close-circle-fill" size="40" class="close-icon"
								@click="closeItem(item)"></u-icon>
							<!-- <u-lazy-load :image="item.enquiryPicture[0]" class="image-item "></u-lazy-load> -->
							<image :src="item.enquiryPicture[0]" mode="aspectFill" class="image-item"></image>
						</view>
						<!-- <image src="/static/images/img-goods.jpg" mode="" class="goods-image"></image> -->
						<view class="padding10">
							<view class=" ">
								<view class="text-overflow3 fs26">{{item.remark}}</view>
								<view class="diy-item m-t10" v-if="item.isCustomized">接受定制</view>
								<view class="m-t20 flex-bettwen m-b10">
									<view class="">
										<text class="price-color fs30" style="font-weight: bold;">{{item.number}}</text>
										<text class="fs24 color-gray">{{item.unit}}</text>
									</view>
									<view class="flex-center">
										<view class="" @click.stop="goChat(item.imUserName)">
											<u-icon name="chat-fill" class="m-r10" color="#10a4db" size="36"></u-icon>
										</view>
										<u-button size="mini" v-if="current == 0"
											@click="offerPrice(item)">报价</u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="waterfall-item-r bg-white m-b20" @click="goDatail(item)"
						v-for="(item, index) in rightList" :key="index">
						<view class="img-box br-top-letfright16 hidden">
							<u-icon name="close-circle-fill" size="40" class="close-icon"
								@click="closeItem(item)"></u-icon>
							<!-- <u-lazy-load :image="item.enquiryPicture[0]" class="image-item "></u-lazy-load> -->
							<image :src="item.enquiryPicture[0]" mode="aspectFill" class="image-item"></image>
						</view>
						<!-- <image src="/static/images/img-goods.jpg" mode="" class="goods-image"></image> -->
						<view class="padding10">
							<view class=" ">
								<view class="text-overflow3 fs26">{{item.remark}}</view>
								<view class="diy-item m-t10" v-if="item.isCustomized">接受定制</view>
								<view class="m-t20 flex-bettwen m-b10">
									<view class="">
										<text class="price-color fs30" style="font-weight: bold;">{{item.number}}</text>
										<text class="fs24 color-gray">{{item.unit}}</text>
									</view>
									<view class="flex-center">
										<view class="" @click.stop="goChat(item.imUserName)">
											<u-icon name="chat-fill" class="m-r10" color="#10a4db" size="36"></u-icon>
										</view>
										<u-button size="mini" v-if="current == 0"
											@click="offerPrice(item)">报价</u-button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</u-waterfall>
		</view>

		<!-- 横向显示 -->
		<view class="margin20  " v-else>
			<view class="m-b20 hidden br12 bg-white flex" @click="goDatail(item)" v-for="(item,index) in flowList"
				:key="index">
				<u-lazy-load :image="item.enquiryPicture[0]" :index="index" class="w-200 h-200"></u-lazy-load>
				<view class="flex1 padding20 flex-column-between" style="">
					<view class="flex text-box ">
						<view class="text-overflow2 fs26">{{item.remark}}</view>
						<u-icon name="close-circle-fill" class="close-icon" @click="closeItem(item,index)"
							color="#838383" size="35"></u-icon>
					</view>
					<view class="diy-item m-t10" style="align-self: baseline" v-if="item.isCustomized">接受定制</view>
					<view class="flex-bettwen">
						<view class="">
							<text class="price-color fs30" style="font-weight: bold;">{{item.number}}</text>
							<text class="fs24 color-gray">{{item.unit}}</text>
						</view>
						<view class="flex-center">
							<view class="" @click.stop="goChat(item.imUserName)">
								<u-icon name="chat-fill" color="#10a4db" size="36"></u-icon>
								<text class="fs24 blue-color m-l10 m-r30" >沟通</text>
							</view>
							<u-button size="mini" v-if="current == 0" @click="offerPrice(item)">报价</u-button>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 报价弹窗 -->
		<u-popup v-model="showWin" @close="closeEnquiryWin" mode="bottom" :closeable="true" border-radius="16"
			:safe-area-inset-bottom="true">
			<view class="padding30">
				<!-- 只能有一个根元素 -->
				<view class="center">
					<view class="center fs30 m-b30" style="font-weight: bold;">报价</view>
				</view>

				<view class="m-b20 hidden br12 bg-white flex" v-if="currentInfo.enquiryPicture.length !== 0">
					<view class="w-200 h-200 br16 hidden">
						<u-lazy-load :image="currentInfo.enquiryPicture[0]" img-mode="widthFix"
							class="w-200 h-200"></u-lazy-load>
					</view>
					<view class="flex1 padding-lr20 flex-column-between" style="">
						<view class="text-overflow3 fs26">{{currentInfo.remark}}</view>
						<view class="">
							<view class="diy-item m-t10" v-if="currentInfo.isCustomized">接受定制</view>
						</view>
						<view class="flex-bettwen" :class="currentInfo.isCustomized?'':'m-t40'">
							<view class="">
								<text class="price-color fs30" style="font-weight: bold;">{{currentInfo.number}}</text>
								<text class="fs24 color-gray">{{currentInfo.unit}}</text>
							</view>
						</view>
					</view>
				</view>


				<view class="padding-tb20">
					<view class="flex-center">
						<text class="price-color">*</text>
						<text style="font-weight: bold;">报价信息</text>
						<view class="color-gray fs24">（可选择<text class="blue-color">已有商品</text>报价或<text
								class="color-blue">手动填写</text>报价信息） </view>
					</view>


					<view class="m-t20 flex">
						<view class="flex-column-center br-line-dashed br12 w-150 h-150 m-r20" @click="chooseImage">
							<view class="center">
								<u-icon name="photo-fill" size="50" color="#999999"></u-icon>
								<view class="fs20 color-gray m-t10">上传图片</view>
							</view>
						</view>
						<view class="flex-column-center br-line-dashed br12 w-150 h-150"
							@click="goPage('/pages/selectGoods/selectGoods')">
							<view class="center">
								<u-icon name="bag-fill" size="50" color="#999999"></u-icon>
								<view class="fs20 color-gray m-t10">选择店内商品</view>
							</view>
						</view>
						<view class="m-l20 image-box" v-if="tempFilePathsImg">
							<image :src="tempFilePathsImg" class="w-150 h-150 br12" mode=""></image>
							<u-icon name="minus-circle-fill" class="minus-circle-fill" size="40" @click="delImg"
								color="#d00421"></u-icon>
						</view>

						<view class="m-l20 image-box" v-if="goodsInfo.cover">
							<image :src="goodsInfo.cover" class="w-150 h-150 br12" mode=""></image>
							<u-icon name="minus-circle-fill" class="minus-circle-fill" size="40" @click="delGoods"
								color="#d00421"></u-icon>
						</view>
					</view>

					<view class="flex-bettwen m-t30">
						<text class="price-color">*</text>
						<text>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</text>
						<view class="flex-bettwen flex1 m-l30">
							<input type="number" placeholder="请填写报价价格" v-model="paramsAddEnquriy.price" class="fs28" />
							<view class="flex-center" @click="showUnit = true">
								<text class="m-r20">元/{{currentText}}</text>
								<u-icon name="arrow-down"></u-icon>
							</view>
						</view>
					</view>

					<view class="flex-bettwen flex-bettwen m-t30">
						<view class="flex-center">
							<text class="price-color">*</text>
							<text>货品类型</text>
						</view>
						<view class="">
							<u-tag text="定做" @click="paramsAddEnquriy.goodsType = '1'"
								:type="paramsAddEnquriy.goodsType == '1'?'success':'info'" class="m-r20" />
							<u-tag text="现货" @click="paramsAddEnquriy.goodsType ='0'"
								:type="paramsAddEnquriy.goodsType == '0'?'success':'info'" />
						</view>
					</view>

					<view class="describe-textarea">
						<view class="flex-center">
							<text class="price-color">*</text>
							<text>报价信息</text>
						</view>
						<textarea class="textarea-box m-t20" :maxlength="-1" v-model="paramsAddEnquriy.details"
							placeholder="请描述主要特征、品名、成份、工艺、用途、规格等"></textarea>
					</view>


					<view class="" style="margin-top: 100rpx;">
						<view class="color-gray" style="font-size: 20rpx;">真诚报价，赢取信任，共同发展；<text
								class="price-color">避免低价诱导</text>，若经查实，则可能面临 <text class="price-color">封禁店铺</text>
						</view>
						<u-button type="primary" class="m-t30" @click="sureAdd">提交报价</u-button>
					</view>
				</view>
			</view>
		</u-popup>


		<!-- 单位弹窗 -->
		<u-popup v-model="showUnit" mode="bottom">
			<view class="center">
				<view class="padding30" v-for="(item,index) in unitList" :key="index"
					:class="currentUnit == item.value?'color-blue':''" @click="selcetItem(item)">{{item.text}}</view>
				<view class="line-x"></view>
			</view>
		</u-popup>

		<!-- 关闭提示 -->
		<u-modal v-model="showSureClose" @cancel="noShowEvent" @confirm="sureCloseEvent" :content="content"
			mask-close-able show-cancel-button cancel-text='是,不再提示' confirm-text="确认"></u-modal>

		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		enquiryList,
		enquiryAdd,
		quoteList,
		enquiryOfferList
	} from '@/api/enquriy/index'
	import {
		requestUrl
	} from '@/common/js/config.js'
	export default {
		data() {
			return {
				isShowlist: false, // 是否瀑布流显示
				showWin: false, // 弹窗显示
				tabList: [{
					name: '未报价'
				}, {
					name: '已报价'
				}],
				classList: [{
					name: '全部'
				}, {
					name: '面料1'
				}, {
					name: '面料2'
				}, {
					name: '面料3'
				}, {
					name: '面料4'
				}, {
					name: '面料5'
				}],
				current: 0, // 顶部切换索引
				currentClass: 0,
				flowList: [],


				currentInfo: {
					enquiryPicture: []
				}, // 选择当前报价信息
				currentText: '米',
				currentUnit: '0',
				paramsAddEnquriy: { // 添加报价参数
					enquiryId: '', // 询价单id
					shopId: '', // 商家id
					shopName: '', // 商家名称
					details: '', // 报价详情
					price: '', // 价格
					unit: 0, // 0-米 1-条 2-码 3-公斤 4-本
					picture: '', // 上传图片
					product: '', // 产品id
					goodsType: '0', // 0-现货 1-定做
					imUserName: '', // 环信账号
				},
				tempFilePathsImg: '',
				goodsInfo: {
					cover: ''
				}, // 选择商品信息
				showSureClose: false, // 控制显示关闭提示框
				content: '确定暂时隐藏该报价？', // 提示框文本
				initCloseState: false, // 初始化关闭状态
				currentEnquriyIdx: null,
				currentEnquriyItem: null,
				shopId: '',
				showUnit:false,
				unitList: [{
						text: '米',
						value: '0'
					},
					{
						text: '条',
						value: '1'
					},
					{
						text: '码',
						value: '2'
					},
					{
						text: '公斤',
						value: '3'
					},
				],
			}
		},
		onShow() {
			this.getUserInfo()
			this.shopId = this.$store.state.shopInfo.id
			this.paramsAddEnquriy.imUserName = this.$store.state.shopInfo.imUserName
			this.paramsAddEnquriy.shopName = this.$store.state.shopInfo.name
			this.paramsAddEnquriy.shopId = this.$store.state.shopInfo.id
			
			
			if (this.current == 1) {
				this.getQuoteList()
			} else {
				this.getEnquriyList()
			}
		},
		onLoad(options) {

			uni.$on('selectGoods', (e) => {
				console.log('拿到商品数据了', e);
				this.goodsInfo = e
				this.paramsAddEnquriy.product = e.id
				if (e.unit == '米') {
					this.paramsAddEnquriy.unit = 0
					this.currentUnit = 0
				} else if (e.unit == '条') {
					this.paramsAddEnquriy.unit = 1
					this.currentUnit = 1
				} else if (e.unit == '码') {
					this.paramsAddEnquriy.unit = 2
					this.currentUnit = 2
				} else if (e.unit == '公斤') {
					this.paramsAddEnquriy.unit = 3
					this.currentUnit = 3
				} else {
					this.paramsAddEnquriy.unit = 4
					this.currentUnit = 4
				}
				this.currentText = e.unit
				this.paramsAddEnquriy.price = e.price
			})
		},
		onUnload() {
			uni.$off('selectGoods')
		},
		methods: {
			// 去聊天
			goChat(item) {
				if (!item) {
					return uni.showToast({
						title: '当前用户未注册环信信息',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: `/pages/msg/messageDetail?data=${item}`
					});
				}

			},
			// 跳转详情
			goDatail(item) {
				if (this.current == 1) {
					uni.navigateTo({
						url: `/pages/opportunity/quote-detail?enquiryId=${item.enquiryId}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/opportunity/enquiry-detail?id=${item.id}`
					})
				}

			},
			// 取已报价列表
			async getQuoteList() {
				let res = await quoteList({
					shopId: this.shopId
				})
				console.log('这是已报价列表', res);
				res.rows.map((it) => {
					it.enquiryPicture = JSON.parse(it.enquiryPicture)
				})

				this.flowList = res.rows
			},

			// 不再显示
			noShowEvent() {
				this.initCloseState = true
				if (this.isShowlist) {
					this.$refs.waterfall.remove(this.currentEnquriyItem)
				} else {
					this.flowList.splice(this.currentEnquriyIdx, 1)
				}
			},
			// 确认关闭
			sureCloseEvent() {
				if (this.isShowlist) {
					this.$refs.waterfall.remove(this.currentEnquriyItem)
				} else {
					this.flowList.splice(this.currentEnquriyIdx, 1)
				}
			},
			// 上传图片
			uploadFile(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://192.168.0.117:80' + '/api/common/upload', //仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log('视频', JSON.parse(res.data).url);
							resolve(JSON.parse(res.data).url)
							// that.params.Video = JSON.parse(res.data).url
						},
						fail: (err) => {
							console.log(err);
						}
					});

				})
			},
			// 删除图片
			delImg() {
				this.tempFilePathsImg = ''
			},
			// 删除商品
			delGoods() {
				this.goodsInfo = {
					cover: ''
				}
				this.paramsAddEnquriy.unit = 0
				this.paramsAddEnquriy.price = ''
				this.paramsAddEnquriy.product = ''
			},
			// 提交报价
			async sureAdd() {
				console.log('提交报价参数', this.paramsAddEnquriy);
				if (!this.paramsAddEnquriy.product && !this.tempFilePathsImg) {
					return this.$refs.uToast.show({
						title: '请上传图片',
						type: 'error',
					})
				}


				if (!this.paramsAddEnquriy.price) {
					return this.$refs.uToast.show({
						title: '请输入价格',
						type: 'error',
					})
				}

				if (!this.paramsAddEnquriy.details) {
					return this.$refs.uToast.show({
						title: '请输入报价信息',
						type: 'error',
					})
				}
				if (this.tempFilePathsImg) {
					this.paramsAddEnquriy.picture = await this.uploadFile(this.tempFilePathsImg)
				}
				if (this.paramsAddEnquriy.product) {
					this.paramsAddEnquriy.picture = this.goodsInfo.cover
				}

				let res = await enquiryAdd(this.paramsAddEnquriy)
				if (res.code == 0) {
					this.$refs.uToast.show({
						title: '报价成功',
						type: 'success',
					})
					// 关闭弹窗
					this.closeEnquiryWin()
				}

			},
			// 隐藏弹窗
			closeEnquiryWin() {
				this.paramsAddEnquriy.unit = 0
				this.paramsAddEnquriy.price = ''
				this.paramsAddEnquriy.product = ''
				this.paramsAddEnquriy.goodsType = '0'
				this.currentText = '米'
				this.currentUnit = '0'
				this.tempFilePathsImg = ''
				this.goodsInfo = {
					cover: ''
				}

				setTimeout(() => {
					this.showWin = false
				}, 1000)
			},

			goPage() {
				uni.navigateTo({
					url: '/pages/selectGoods/selectGoods'
				})
			},
			// 选择单位
			selcetItem(item) {
				this.currentUnit = item.value
				this.currentText = item.text
				this.paramsAddEnquriy.unit = item.value
				this.showUnit = false
			},
			// 上传图片
			chooseImage() {

				if (this.goodsInfo.cover) {
					return this.$refs.uToast.show({
						title: '请删除关联商品',
						type: 'error',
					})
				}
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths);
						that.tempFilePathsImg = res.tempFilePaths[0]
					}
				});


			},
			// 暂未开发提示
			showToast() {
				uni.showToast({
					title: '功能暂未开发~'
				})
			},
			// 报价
			offerPrice(item) {
				this.currentInfo = item
				this.paramsAddEnquriy.enquiryId = item.enquiryId
				this.showWin = true
			},
			// 关闭
			closeItem(item, idx) {
				if (!this.initCloseState) {
					this.showSureClose = true
					this.currentEnquriyItem = item.id
					if (idx) {
						this.currentEnquriyIdx = idx
					}

				} else {
					if (this.isShowlist) {
						this.$refs.waterfall.remove(item.id)
					} else {
						this.flowList.splice(idx, 1)
					}

				}
			},
			// 取询价列表
			async getEnquriyList() {
				let res = await enquiryOfferList({
					shopId: this.shopId
				})

				res.rows.map((it) => {
					it.enquiryPicture = JSON.parse(it.enquiryPicture)
				})

				console.log('询价结果', res);
				this.flowList = res.rows
			},
			// 登录环信
			loginHuanXin() {
				let imToken = uni.getStorageSync('imToken')
				let imUserName = uni.getStorageSync('imUserName')
				if (imToken && imUserName) {
					imUtil.loginImBytoken(imUserName, imToken)
				}
			},
			getUserInfo() {
				this.$store.dispatch('updateUserInfo')
			},
			goPage(url) {
				if (!url) {
					return uni.showToast({
						title: '敬请期待！',
						icon: 'none'
					})
				}
				if (this.tempFilePathsImg) {
					return this.$refs.uToast.show({
						title: '请先删除图片',
						type: 'error',
					})
				}


				uni.navigateTo({
					url
				})
			},



			change(index) {
				this.current = index;
				if(this.isShowlist){
					this.$refs.waterfall.clear()
				}
				if (index == 1) {
					this.getQuoteList()
				} else {
					this.getEnquriyList()
				}
			},
			changeClass(index) {
				this.currentClass = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		width: 400rpx;
	}

	.goods-image {
		width: 200rpx;
		height: 200rpx;
	}

	.image-item {
		width: 100%;
		max-height: 350rpx;
	}

	.waterfall-item-l {
		width: 348rpx;
		border: 1rpx solid #f2f2f2;
		border-radius: 0 0 12rpx 12rpx;
	}

	.waterfall-item-r {
		width: 348rpx;
		border: 1rpx solid #f2f2f2;
		margin-left: 20rpx;
		border-radius: 0 0 12rpx 12rpx;
	}

	.img-box {
		position: relative;

		.close-icon {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 11;
		}
	}

	.diy-item {
		color: #58b261;
		border: 1rpx solid #58b261;
		padding: 5rpx 10rpx;
		display: inline-block;
		border-radius: 12rpx;
		font-size: 20rpx;
	}

	.blue-color {
		color: #10a4db;
	}

	.m-t40 {
		margin-top: 40rpx;
	}

	.text-box {
		position: relative;

		.close-icon {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
		}
	}

	.image-box {
		position: relative;

		.minus-circle-fill {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
		}
	}

	.describe-textarea {
		border-radius: 16rpx;
		margin-top: 20rpx;
	}

	.textarea-box {
		width: 94%;
		height: 100rpx;
		border-radius: 16rpx;
		background: #f2f2f2;
		font-size: 24rpx;
		// line-height: 40rpx;
		padding: 20rpx;
	}
</style>